<template>
  <view :class="['tag', typeClass]" :style="{fontSize: size}">
    <slot>{{ text }}</slot>
    
  </view>
</template>

<script>
export default {
  name: 'Tag',
  props: {
    text: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'end' // notstart/doing/end
    },
    size: {
      type: String,
      default: '22rpx'
    }
  },
  computed: {
    typeClass() {
      if(this.type=="notstart"){
        return 'tag-notstart'
      }else if(this.type=="doing"){
        return 'tag-doing'
      }else if(this.type=="end"){
        return 'tag-end'
      }else{
        return 'tag-end'
      }
     
    }
  }
}
</script>

<style scoped>
.tag {
  /* font-size: 22rpx; */
  padding: 6rpx 16rpx;
  border-radius: 4rpx;
  font-weight: 500;
  display: inline-block;
}
.tag-notstart {
  color: #027AFF;
  background: rgba(2, 122, 255, 0.1);
}
.tag-doing {
  color: #15D662;
  background: rgba(21, 214, 98, 0.1);
}
.tag-end {
  color: #F72424;
  background: rgba(247, 36, 36, 0.1);
}
</style>
